$(function(){
  let $image = $('#image');
  // - 设置配置项
   const options = {
      // 纵横比(宽高比)
      aspectRatio: 1, // 正方形
      // 指定预览区域
      preview: '.img-preview' // 指定预览区的类名（选择器）
  };
  // - 调用cropper方法，创建剪裁区
  $('#image').cropper(options);

  // 头像上传分三步
  // 1.选择图片； 2.渲染图片； 3.上传头像
  $('#chooseImageBtn').on('click',function(){
    $('#chooseImageInp').click()
  })
  // 2.渲染图片； change 选择文件的时候触发的事件；value值发生改变就会触动
  $('#chooseImageInp').on('change',function(){
    // console.log(this.value);
    // 1.获取文件对象
    let file = this.files[0]
    // 非空校验
    if(file === undefined) {
      return layui.layer.msg('上传头像，不能为空!')
    }
    // 根据文件对象，生成路径
    let url =URL.createObjectURL(file)
    // console.log(url);
    // 给浏览器图片区域赋值
    $image.cropper('destroy')  //先销毁，在设置，最后渲染
        .attr('src',url)       
        .cropper(options)      //链式编程
  })
  //3.上传头像
  $('#uploadBtn').on('click', function(){
    //把裁剪区域的图片，转换为base64格式的字符串
    let dataURL = $image
        .cropper('getCroppedCanvas',{
            width:100,
            height:100
        })
        .toDataURL('image/png')
        // console.log(dataURL);
        //发送ajax 更换用户头像
        axios({
          url:'/my/update/avatar',
          method:'post',
          data: "avatar=" + encodeURIComponent(dataURL) 
        }).then(res=>{
          //成功回调
          // console.log(res)
          if(res.data.status !== 0){
            return layui.layer.msg(res.data.message)
          }
          //成功：提示+刷新父页面头像渲染
          layui.layer.msg('恭喜您，更改用户头像成功!')
          window.parent.getUserInfo()
        });
  })
})
